<template>
  <div class="third-step-container">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-position="top"
    >
      <!-- start 创建维度  -->
      <el-form-item class="create-dimension" :label="$t('smartPlan.createDimension')" prop="createDimension">
        <el-select
          v-model="form.createDimension"
          :disabled="action == 'edit'"
          :placeholder="$t('common.placeholder.select')"
        >
          <el-option
            v-for="item in dimensionList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <div class="dimension-item flex-x">
              <span class="label">{{ item.label }}</span>
              <span class="desc">{{ item.desc }}</span>
            </div>
          </el-option>
        </el-select>
      </el-form-item>
      <!-- end 创建维度 -->
      <!-- start 开始时间 -->
      <el-form-item :label="$t('common.base.startTime')" required>
        <el-select
          class="mar-r-12 width-120"
          v-model="form.startSetting.bizType"
          :placeholder="$t('common.placeholder.select')"
          @change="startBizTypeChange"
        >
          <el-option
            v-for="item in startBizTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <!-- 指定时间 -->
        <template v-if="form.startSetting.bizType == 'specifyTime'">
          <el-form-item prop="startSetting.specifyTime">
            <el-date-picker
              class="width-300"
              v-model="form.startSetting.specifyTime"
              type="datetime"
              format="yyyy-MM-dd HH:mm"
              value-format="timestamp"
              :default-time="defaultStartTime"
              :picker-options="pickerOptions"
              :placeholder="$t('common.placeholder.select')"
              popper-class="specifyTime-picker"
            ></el-date-picker>
          </el-form-item>
        </template>
        <!-- 工单、事件等时间 -->
        <template v-else>
          <!-- 计划开始结束时间、产品质保时间、自定义时间 -->
          <el-form-item prop="startSetting.fieldName">
            <el-select
              class="mar-r-12"
              v-model="form.startSetting.fieldName"
              :placeholder="$t('common.placeholder.select')"
              :loading="loading"
            >
              <el-option
                v-for="item in startTimeFieldList"
                :key="item.fieldName"
                :label="item.displayName"
                :value="item.fieldName">
              </el-option>
            </el-select>
          </el-form-item>
          
          <!-- 时间维度 前后 -->
          <el-form-item prop="startSetting.timeDimension">
            <el-select class="mar-r-12 width-80" v-model="form.startSetting.timeDimension" :placeholder="$t('common.placeholder.select')">
              <el-option
                v-for="item in startTimeDimensionList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="startSetting.day">
            <i18n path="smartPlan.beforeOrBehindDayCreate">
              <el-input
                class="mar-r-12 width-80"
                place="num"
                v-model="form.startSetting.day"
                type="number"
                :placeholder="$t('common.placeholder.input2')"
                @input="startDayChange"
              ></el-input>
            </i18n>
          </el-form-item>
        </template>
      </el-form-item>
      <!-- end 开始时间 -->
      <!-- start 结束时间 -->
      <el-form-item :label="$t('common.base.endTime')" required>
        <el-select
          class="mar-r-12 width-120"
          v-model="form.endSetting.bizType"
          :placeholder="$t('common.placeholder.select')"
          @change="endBizTypeChange"
        >
          <el-option
            v-for="item in endBizTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <!-- 指定时间 -->
        <template v-if="form.endSetting.bizType == 'specifyTime'">
          <el-form-item prop="endSetting.specifyTime">
            <el-date-picker
              class="width-300"
              v-model="form.endSetting.specifyTime"
              type="datetime"
              format="yyyy-MM-dd HH:mm"
              value-format="timestamp"
              :default-time="defaultEndTime"
              :default-value="endTimeDefaultValue"
              :picker-options="pickerOptions"
              :placeholder="$t('common.placeholder.select')"
              popper-class="specifyTime-picker"
            ></el-date-picker>
          </el-form-item>
        </template>
        <template v-else-if="form.endSetting.bizType == 'times'">
          <el-form-item prop="endSetting.num">
            <el-input
              class="mar-r-12 width-80"
              v-model="form.endSetting.num"
              type="number"
              :placeholder="$t('common.placeholder.input2')"
              @input="endSettingNumChange"
            ></el-input>
          </el-form-item>
        </template>
        <!-- 工单、事件等时间 -->
        <template v-else>
          <!-- 计划开始结束时间、产品质保时间、自定义时间 -->
          <el-form-item prop="endSetting.fieldName">
            <el-select class="mar-r-12" v-model="form.endSetting.fieldName" :placeholder="$t('common.placeholder.select')">
              <el-option
                v-for="item in endTimeFieldList"
                :key="item.fieldName"
                :label="item.displayName"
                :value="item.fieldName">
              </el-option>
            </el-select>
          </el-form-item>
        </template>
      </el-form-item>
      <!-- end 结束时间 -->
      <!-- start 重复周期 -->
      <el-form-item :label="$t('common.base.recurrence')" required>
        <el-select
          class="mar-r-12 width-120"
          v-model="form.periodSetting.type"
          :placeholder="$t('common.placeholder.select')"
          @change="periodTypeChange"
        >
          <el-option
            v-for="item in periodTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <template v-if="form.periodSetting.type == 'fixed'">
          <i18n path="smartPlan.timeExecute">
            <div class="flex-x" place="data">
              <el-form-item class="mar-l-12" prop="periodSetting.num">
                <el-input
                  class="mar-r-12 width-80"
                  v-model="form.periodSetting.num"
                  type="number"
                  :placeholder="$t('common.placeholder.input2')"
                  @input="periodSettingNumChange"
                ></el-input>
              </el-form-item>
              <el-form-item prop="periodSetting.unit">
                <el-select class="mar-r-12" v-model="form.periodSetting.unit" :placeholder="$t('common.placeholder.select')">
                  <el-option
                    v-for="item in periodUnitList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </i18n>
        </template>
        <template v-else>
          <el-form-item prop="periodSetting.bizType">
            <el-select
              class="mar-r-12 width-120"
              v-model="form.periodSetting.bizType"
              :placeholder="$t('common.placeholder.select')"
              @change="periodBizTypeChange"
            >
              <el-option
                v-for="item in periodBizTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="periodSetting.fieldName">
            <el-select class="mar-r-12 width-120" v-model="form.periodSetting.fieldName" :placeholder="$t('common.placeholder.select')">
              <el-option
                v-for="item in periodTimeFieldList"
                :key="item.fieldName"
                :label="item.displayName"
                :value="item.fieldName">
              </el-option>
            </el-select>
          </el-form-item>
          <i18n path="smartPlan.behindTimeExecute">
            <div class="flex-x" place="data">
              <el-form-item class="mar-l-12" prop="periodSetting.num">
                <el-input
                  class="mar-r-12 width-80"
                  v-model="form.periodSetting.num"
                  type="number"
                  :placeholder="$t('common.placeholder.input2')"
                  @input="periodSettingNumChange"
                ></el-input>
              </el-form-item>
              <el-form-item prop="periodSetting.unit">
                <el-select class="mar-r-12 width-120" v-model="form.periodSetting.unit" :placeholder="$t('common.placeholder.select')">
                  <el-option
                    v-for="item in periodUnitList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </i18n>
        </template>
      </el-form-item>
      <!-- end 重复周期 -->
    </el-form>
  </div>
</template>

<script>
import { getCustomerFields } from '@src/api/CustomerApi'
import { getProductFields } from '@src/api/ProductApi'
import { safeNewDate } from '@src/util/time';
import { isEmpty, getPlanStartTime, formatDate } from 'pub-bbx-utils';
import { t } from '@src/locales'
export default {
  name: 'third-step',
  props: {
    bizType: {
      type: String,
      default: 'TASK'
    },
    action: {
      type: String,
      default: 'create'
    },
    editForm: {
      type: Object,
      default: () => ({})
    },
    fields: {
      type: Array,
      default: () => []
    },
    planBasicData: {
      type: Array,
      default: () => []
    },
    planRange: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      loading: false,
      form: {
        createDimension: '',
        startSetting: {
          bizType: 'specifyTime', // 模块 specifyTime、TASK、EVENT等
          specifyTime: '', // 指定时间（时间戳）
          fieldName: '', // 计划开始、结束时间，产品质保时间，自定义时间
          timeDimension: 'before', // 前、后
          day: '', // 天数
          displayName: '',
        },
        endSetting: {
          bizType: 'specifyTime', // 模块 specifyTime、TASK、EVENT等
          specifyTime: '', // 指定时间（时间戳）
          num: '', // 执行次数
          fieldName: '',
          displayName: '',
        },
        periodSetting: {
          type: 'fixed', // 重复类型 固定重复:fixed，动态重复:dynamic
          bizType: '', // 模块 specifyTime、TASK、EVENT等
          fieldName: '', // 计划开始、结束时间，自定义时间
          num: '', // 几个小时/天/周/月
          unit: '', // 单位 (小时、天、周、月)
        },
      },
      rules: {
        createDimension: [
          { required: true, message: t('common.placeholder.selectSomething', {0: t('smartPlan.createDimension')}), trigger: 'change' },
        ],
        'startSetting.specifyTime': [
          { required: true, message: t('common.placeholder.select'), trigger: 'change' },
          { validator: this.checkSpecifyTime, trigger: 'change' }
        ],
        'startSetting.fieldName': [
          { required: true, message: t('common.placeholder.select'), trigger: 'change' },
        ],
        'startSetting.timeDimension': [
          { required: true, message: t('common.placeholder.select'), trigger: 'change' },
        ],
        'startSetting.day': [
          { required: true, message: t('common.placeholder.input2'), trigger: 'blur' },
        ],
        'endSetting.specifyTime': [
          { required: true, message: t('common.placeholder.select'), trigger: 'change' },
          { validator: this.checkSpecifyTime, trigger: 'change' }
        ],
        'endSetting.num': [
          { required: true, message: t('common.placeholder.input2'), trigger: 'blur' },
        ],
        'endSetting.fieldName': [
          { required: true, message: t('common.placeholder.select'), trigger: 'change' },
        ],
        'periodSetting.num': [
          { required: true, message: t('common.placeholder.input2'), trigger: 'blur' },
        ],
        'periodSetting.unit': [
          { required: true, message: t('common.placeholder.select'), trigger: 'change' },
        ],
        'periodSetting.bizType': [
          { required: true, message: t('common.placeholder.select'), trigger: 'change' },
        ],
        'periodSetting.fieldName': [
          { required: true, message: t('common.placeholder.select'), trigger: 'change' },
        ],
      },
      // 开始时间 前、后
      startTimeDimensionList: [{
        label: t('common.base.before'),
        value: 'before'
      }, {
        label: t('common.base.after'),
        value: 'behind'
      }],
      startTimeFieldList: [], // 开始时间相关字段列表
      endTimeFieldList: [], // 结束时间相关字段列表
      endTimeDefaultValue: null,
      // 重复周期类型 固定重复、动态重复
      periodTypeList: [{
        label: t('smartPlan.fixedRepetition'),
        value: 'fixed'
      }, {
        label: t('smartPlan.dynamicRepetition'),
        value: 'dynamic'
      }],
      periodTimeFieldList: [], // 重复周期时间相关字段列表
      // 重复周期时间单位
      periodUnitList: [{
        label: t('common.base.hour1'),
        value: 'hour'
      }, {
        label: t('common.time.day'),
        value: 'day'
      }, {
        label: t('common.time.week'),
        value: 'week'
      }, {
        label: t('common.time.month'),
        value: 'month'
      }],
      customerFields: [],
      productFields: [],
      paasFields: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < safeNewDate(safeNewDate().toLocaleDateString()).getTime()
        }
      },
    }
  },
  computed: {
    // 创建维度列表
    dimensionList() {
      return [{
        label: t('smartPlan.createByProductDimension'),
        desc: t('smartPlan.productDimensionDesc'),
        value: 0,
        show: this.bizType != 'ACTIVITY_RESEARCH'
      }, {
        label: t('smartPlan.createByCustomerDimension'),
        desc: t('smartPlan.customerDimensionDesc'),
        value: 1,
        show: true
      }].filter(item => item.show)
    },
    // 重复周期模块 工单、事件、PaaS、活动调研
    periodBizTypeList() {
      return [{
        label: t('common.base.task'),
        value: 'TASK',
        show: this.bizType == 'TASK'
      }, {
        label: t('common.base.event'),
        value: 'EVENT',
        show: this.bizType == 'EVENT'
      }, {
        label: 'PaaS',
        value: 'PAAS',
        show: this.bizType == 'PAAS'
      }, {
        label: t('common.pageTitle.pagePcoperationCustomerExperienceActivityResearchList'),
        value: 'ACTIVITY_RESEARCH',
        show: this.bizType == 'ACTIVITY_RESEARCH'
      }].filter(item => item.show)
    },
    // 开始时间模块
    startBizTypeList() {
      return this.getBizTypeList()
    },
    // 结束时间模块
    endBizTypeList() {
      return this.getBizTypeList('end')
    },
    defaultStartTime() {
      return getPlanStartTime(safeNewDate(), 'task').split(' ')[1]
    },
    defaultEndTime() {
      const startTime = this.form.startSetting.specifyTime
      if (startTime && !this.form.endSetting.specifyTime) {
        let maxNum = 24 * 60 * 60 * 1000
        return formatDate(startTime + maxNum, 'HH:mm:ss')
      }
      return '23:59:00'
    },
  },
  watch: {
    editForm: {
      immediate: true,
      deep: true,
      handler(newValue) {
        if (!isEmpty(newValue)) {
          this.form = newValue
          this.periodBizTypeChange(this.bizType)
        }
      }
    },
    planBasicData: {
      immediate: true,
      deep: true,
      handler(newValue) {
        if (this.form.startSetting.bizType != 'specifyTime') {
          this.getTimeFieldList(this.form.startSetting.bizType, 'start')
        }
        if (this.form.endSetting.bizType != 'specifyTime') {
          this.getTimeFieldList(this.form.endSetting.bizType, 'end')
        }        
      }
    },
    planRange: {
      immediate: true,
      deep: true,
      handler(newValue) {
        this.getBizTypeList()     
        this.getBizTypeList('end')     
        if (this.form.startSetting.bizType == 'CONTRACT') {
          this.getTimeFieldList('CONTRACT', 'start')
        }
        if (this.form.endSetting.bizType == 'CONTRACT') {
          this.getTimeFieldList('CONTRACT', 'end')
        }
      }
    },
    'form.startSetting.specifyTime': {
      immediate: true,
      deep: true,
      handler(newValue) {
        // 指定结束时间默认值赋值
        if (newValue && !this.form.endSetting.specifyTime) {
          this.endTimeDefaultValue = newValue + (24 * 60 * 60 * 1000)
        } else {
          this.endTimeDefaultValue = null
        }
      }
    },
  },
  methods: {
    getBizTypeList(type) {
      const hasCustomerCondition = this.planRange.some(item => item.some(c => c.module && c.module[0] == 'customer'))
      const hasProductCondition = this.planRange.some(item => item.some(c => c.module && c.module[0] == 'product'))
      const hasContractCondition = this.planRange.some(item => item.some(c => c.module && c.module[0] == 'contract'))
      // 没有客户、产品条件，但是之前选中了客户、产品模块时清空数据
      if (
        (!hasCustomerCondition && this.form.startSetting.bizType == 'CUSTOMER')
        || (!hasProductCondition && this.form.startSetting.bizType == 'PRODUCT')
      ) {
        this.form.startSetting.bizType = ''
        this.form.startSetting.fieldName = ''
      }
      if (
        (!hasCustomerCondition && this.form.endSetting.bizType == 'CUSTOMER')
        || (!hasProductCondition && this.form.endSetting.bizType == 'PRODUCT')
      ) {
        this.form.endSetting.bizType = ''
        this.form.endSetting.fieldName = ''
      }

      return [{
        label: t('smartPlan.specifyTime'),
        value: 'specifyTime',
        show: true
      }, {
        label: t('task.edit.byExecutedNum'),
        value: 'times',
        show: type == 'end'
      }, {
        label: t('common.base.task'),
        value: 'TASK',
        show: this.bizType == 'TASK'
      }, {
        label: t('common.base.event'),
        value: 'EVENT',
        show: this.bizType == 'EVENT'
      }, {
        label: 'PaaS',
        value: 'PAAS',
        show: this.bizType == 'PAAS'
      }, {
        label: t('common.pageTitle.pagePcoperationCustomerExperienceActivityResearchList'),
        value: 'ACTIVITY_RESEARCH',
        show: this.bizType == 'ACTIVITY_RESEARCH'
      }, {
        label: t('common.base.customer'),
        value: 'CUSTOMER',
        show: hasCustomerCondition
      }, {
        label: t('common.base.product'),
        value: 'PRODUCT',
        show: hasProductCondition && this.bizType != 'ACTIVITY_RESEARCH' && this.form.createDimension != 1
      }, {
        label: t('contract.contract'),
        value: 'CONTRACT',
        show: hasContractCondition
      }].filter(item => item.show)
    },
    // 开始时间模块
    startBizTypeChange(value) {
      this.$refs.form.clearValidate(['startSetting.specifyTime', 'endSetting.specifyTime'])
      this.form.startSetting.specifyTime = ''
      this.form.startSetting.fieldName = ''
      this.form.startSetting.timeDimension = 'before'
      this.form.startSetting.day = ''
      this.form.startSetting.displayName = ''
      this.getTimeFieldList(value, 'start')
    },
    // 结束时间模块
    endBizTypeChange(value) {
      this.$set(this.form.endSetting, 'specifyTime', '')
      this.form.endSetting.num = ''
      this.form.endSetting.fieldName = ''
      this.form.endSetting.displayName = ''
      this.getTimeFieldList(value, 'end')
    },
    // 获取开始时间、结束时间字段
    async getTimeFieldList(value, type) {
      let fields = []
      if (['TASK', 'EVENT', 'PAAS'].includes(value)) {
        // 工单事件表单计划开始时间、计划完成时间和自定义时间字段有值时添加该字段
        this.fields.forEach(item => {
          let isShowSystemField = ['planTime', 'planStartTime', 'planEndTime'].includes(item.fieldName)
          let isShowDateField = item.formType == 'date' && (isEmpty(item.setting?.dateType) || item.setting?.dateType == 'yyyy-MM-dd')
          let isShowDatetimeField = item.formType == 'datetime' && item.setting?.dateType == 'yyyy-MM-dd'
          let showField = isShowSystemField || ((isShowDateField || isShowDatetimeField) && item.isSystem == 0)
          if (value == 'PAAS') {
            showField = (isShowDateField || isShowDatetimeField) && item.isSystem == 0
          }
          if (showField) {
            this.planBasicData.forEach(data => {
              if (data.fieldName == item.fieldName && data.value && data.value != 'null') {
                fields.push({
                  displayName: item.displayName,
                  fieldName: item.fieldName
                })
              }
            })
          }
        })
      } else if (value == 'CUSTOMER') {
        if (this.customerFields.length) {
          fields = this.customerFields
        } else {
          this.loading = true
          const res = await getCustomerFields({isFromSetting: false})
          const data = res.data || []
          fields = [{
            displayName: t('common.base.createTime'),
            fieldName: 'createTime'
          }]
          fields = this.getDateFields(data, fields)
          this.customerFields = fields
          this.loading = false
        }
      } else if (value == 'PRODUCT') {
        if (this.productFields.length) {
          fields = this.productFields
        } else {
          this.loading = true
          const res = await getProductFields({isFromSetting: false})
          const data = res.data || []
          fields = [{
            displayName: t('common.base.createTime'),
            fieldName: 'createTime'
          }, {
            displayName: t('common.form.preview.qualityField.label1'),
            fieldName: 'qualityStartTime'
          }, {
            displayName: t('common.form.preview.qualityField.label2'),
            fieldName: 'qualityEndTime'
          }]
          fields = this.getDateFields(data, fields)
          this.productFields = fields
          this.loading = false
        }
      } else if (value == 'CONTRACT') {
        fields = [{
          displayName: t('common.base.createTime'),
          fieldName: 'createTime'
        }, {
          displayName: t('common.contract.list.effectiveDate'),
          fieldName: 'effectiveTime'
        }, {
          displayName: t('common.contract.list.expirationDate'),
          fieldName: 'invalidTime'
        }]
        const contractRangeArr = this.planRange.filter(item => item.some(c => c.module && c.module[0] == 'contract'))
        const contractFormIdArr = [...new Set(contractRangeArr.map(item => item[0]).map(item => item.module[1]))]
        // 只有一种合同表单时，显示自定义日期控件
        if (contractFormIdArr.length == 1) {
          const fieldsOptions = contractRangeArr[0][0].fieldsOptions || []
          fields = this.getDateFields(fieldsOptions, fields)
        }
      } else if (value == 'ACTIVITY_RESEARCH') {
        // 活动调研开始、结束时间字段有值时添加该字段
        this.fields.forEach(item => {
          let isShowField = ['activitiesStartTime', 'activitiesEndTime'].includes(item.fieldName)
          if (isShowField) {
            this.planBasicData.forEach(data => {
              if (data.fieldName == item.fieldName && data.value && data.value != 'null') {
                fields.push({
                  displayName: item.displayName,
                  fieldName: item.fieldName
                })
              }
            })
          }
        })
      }
      if (type == 'start') {
        this.startTimeFieldList = fields
        
        if (!this.startTimeFieldList.some(f => f.fieldName == this.form.startSetting.fieldName)) {
          this.form.startSetting.fieldName = ''
        }
      } else if (type == 'end') {
        this.endTimeFieldList = fields
        if (!this.endTimeFieldList.some(f => f.fieldName == this.form.endSetting.fieldName)) {
          this.form.endSetting.fieldName = ''
        }
      }
    },
    // 获取自定义日期字段
    getDateFields(originFields, fields) {
      originFields.forEach(item => {
        let isShowDateField = item.formType == 'date' && (isEmpty(item.setting?.dateType) || item.setting?.dateType == 'yyyy-MM-dd')
        let isShowDatetimeField = item.formType == 'datetime' && item.setting?.dateType == 'yyyy-MM-dd'
        if ((isShowDateField || isShowDatetimeField) && item.isSystem == 0) {
          fields.push(item)
        }
      })
      return fields
    },
    // 重复周期类型
    periodTypeChange(value) {
      if (value == 'dynamic') {
        // 默认选中重复周期模块
        this.form.periodSetting.bizType = this.bizType
        this.periodBizTypeChange(this.bizType)
      }
    },
    // 重复周期模块
    periodBizTypeChange(value) {
      this.periodTimeFieldList = [{
        displayName: t('common.base.createTime'),
        fieldName: 'createTime',
        show: true
      }, {
        displayName: t('common.base.startTime'),
        fieldName: 'startTime',
        show: value == 'TASK' || value == 'EVENT'
      }, {
        displayName: t('common.base.completeTime'),
        fieldName: 'completeTime',
        show: value != 'PAAS' && value != 'ACTIVITY_RESEARCH'
      }].filter(item => item.show)
    },
    startDayChange(value) {
      this.form.startSetting.day = this.validateInput(value)
      if (this.form.startSetting.day > 99) {
        this.form.startSetting.day = 99
      }
    },
    endSettingNumChange(value) {
      this.form.endSetting.num = this.integerValidate(value)
      if (this.form.endSetting.num > 1000) {
        this.form.endSetting.num = 1000
      }
    },
    periodSettingNumChange(value) {
      this.form.periodSetting.num = this.integerValidate(value)
    },
    validateInput(value) {
      const regex = /^\d+$/
      if (!regex.test(value)) {
        value = ''
      }
      return value
    },
    integerValidate(value) {
      const regex = /^[1-9]\d*$/
      if (!regex.test(value)) {
        value = ''
      }
      return value
    },
    // 校验开始结束时间选择指定时间
    checkSpecifyTime(rule, value, callback) {
      let bizType = this.form.endSetting.bizType
      let specifyTime = this.form.endSetting.specifyTime
      if (rule.field == 'endSetting.specifyTime') {
        bizType = this.form.startSetting.bizType
        specifyTime = this.form.startSetting.specifyTime
      }
      if (bizType == 'specifyTime') {
        let nowTime = safeNewDate().getTime()
        if (value && value < nowTime) {
          const displayName = rule.field == 'startSetting.specifyTime' ? t('common.base.startTime') : t('common.base.endTime')
          callback(new Error(t('common.base.tip.cannotBeEarlierThanNow', {data1: displayName})))
        }
        if (value && specifyTime) {
          if (rule.field == 'startSetting.specifyTime') {
            value > specifyTime && callback(new Error(t('smartPlan.tips.tip1')))
          } else if (rule.field == 'endSetting.specifyTime') {
            value < specifyTime && callback(new Error(t('smartPlan.tips.tip1')))
          }
          value == specifyTime && callback(new Error(t('smartPlan.tips.tip2')))
        }
      }
      callback()
    },
    async validate() {
      let valid = await this.$refs.form.validate()
      return valid
    },
    buildParams() {
      const params = this.form
      // 传参displayName，用于详情展示
      if (params.startSetting.fieldName) {
        params.startSetting.displayName = this.startTimeFieldList.find(f => f.fieldName == params.startSetting.fieldName)?.displayName
      }
      if (params.endSetting.fieldName) {
        params.endSetting.displayName = this.endTimeFieldList.find(f => f.fieldName == params.endSetting.fieldName)?.displayName
      }
      if (params.periodSetting.fieldName) {
        params.periodSetting.displayName = this.periodTimeFieldList.find(f => f.fieldName == params.periodSetting.fieldName)?.displayName
      }
      return params
    },
  },
}
</script>

<style lang="scss">
.third-step-container {
  .el-form-item__content {
    display: flex;
    > span {
      display: flex;
      align-items: center;
    }
    .el-form-item--small.el-form-item {
      margin-bottom: 0;
    }
  }
  .create-dimension {
    .el-select {
      width: 100%;
    }
  }
  .width-80 {
    width: 80px !important;
  }
  .width-120 {
    width: 120px !important;
  }
  .width-300 {
    width: 300px !important;
  }
}
.specifyTime-picker .el-picker-panel__footer button:first-child {
  display: none;
}
.dimension-item {
  justify-content: space-between;
  .desc {
    color: #BFBFBF;
    font-weight: normal;
  }
}
</style>